<template>
  <div class="tabs_ar" v-show="tabList.length > 1">
    <div
      v-for="(item, index) in tabList"
      :key="index"
      :class="tabActive == item.parameter ? 'active' : 'mid'"
      @click="changeTab(item)"
    >
      <div class="font16">{{item.name}}</div>
      <div v-show="tabActive == item.parameter" class="line"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabActive: {
      type: String,
    },
  },
  data() {
    return {
      tabList: [],
    };
  },
  methods: {
    changeTab(item) {
      if (this.tabActive == item.parameter) return;
      this.$emit("changeSpecial", item.parameter);
    },
  },
};
</script>

<style lang="less" scoped>
.tabs_ar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 15px 0;
    z-index: 999;
    background: #fff;

    .mid {
      display: inline-block;
      text-align: center;
      height: 50px;
      flex: 1;
      opacity: 1;
      font-size: 36px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 400;
      color: #333333;
      line-height: 50px;
    }

    .line {
      padding-right: 36px;
      text-align: center;
      width: 30px;
      border: 1px solid #CC1B10;
      background-color: #CC1B10;
      height: 4px;
      border-radius: 4px;
      margin: 5px auto;
    }

    .active {
      display: inline-block;
      flex: 1;
      height: 50px;
      opacity: 1;
      font-size: 36px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 400;
      text-align: center;
      color: #333333;
      line-height: 50px;
      color: #ff540d;
    }
    .font16{
      font-size: 32px;
    }
  }
</style>